<template>
	<view class="level-wrap">
		<view class="list" v-if="serviceList.length>0">
			<view class="navShow" v-for="(el, index) in serviceList" :key="el.title">

				<view class="showList mm">
					<!-- 图片 -->
					<image :src="el.coverJson" mode="" class="showImage"></image>
					<view class="details">
						<view class="pro">{{ el.name }}</view>
						<view class="content text-overflow line2">{{ el.introduction }}</view>
						<view class="bottom">
							<view class="price">
								<!-- {{ el.price }}元 -->
							</view>
							<view class="btn" @click="serviceDetail(el)">
								立即分享
							</view>
						</view>

					</view>

				</view>

			</view>
		</view>
		
		
		<uni-popup ref="popupShare" type="center" :mask="true" :mask-click="false">
			<view class="marks column">
				<view class="title">服务分享</view>
				<view class="navShow">
					<view class="showList">
						<!-- 图片 -->
						<image :src="item.coverJson" mode="" class="showImage"></image>
						<view class="details">
							<view class="pro">{{ item.name }}</view>
							<view class="content text-overflow line2">{{ item.introduction }}</view>
							<view class="bottoms">
								<view class="num">
									{{ item.countNum }}人购买
								</view>
								<view class="price">
									{{ item.price }}元起
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bg">
					<image :src="bg" mode="" @longpress="handleDown"></image>
					
				</view>
				<view class="tips">微信扫码下单</view>
			</view>
			<view class="cancel" @click="closePopup"></view>
		</uni-popup>
		
		
		
		
		<uni-load-more v-if="isReachBottom" :status="more"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue';
	import {
		nurseShareHotServices,
		getWXCode
	} from '@/apis/report/index.js'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				id: 0,
				item: '',
				bg: '',
				serviceList: [],
				more: 'loading',
				isReachBottom: false,
				page: {
					pageNum: 1,
					pageSize: 10,
				}
			}
		},
		components: {
			uniLoadMore,
			uniPopup,
		},
		//下拉
		onPullDownRefresh() {
			this.isReachBottom=false
			this.more = 'more';
			this.page.pageNum=1,
			this.getChildren()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onNavigationBarButtonTap(e) {
			this.handleModel();// 这是我自己写的方法
		   },
		onLoad(options) {
			this.getChildren()
			// console.log(options)
			// if(options.id){
			// 	this.id = options.id
			// 	this.getChildren()
			// 	uni.setNavigationBarTitle({
			// 		title: options.name
			// 	})
			// }
		},
		onReachBottom() {

			if (this.more == 'noMore') return //没有更多数据了
			this.isReachBottom = true
			this.more = 'loading';
			this.page.pageNum++
			this.getChildren()
		},
		methods: {
			handleModel(){
				uni.showModal({
					title: '分享规则',
					content: '套餐分享成功后，用户下单系统将短信优先通知您！您可在10分钟内进行抢单，如超时未抢单，此订单将面向全部用户！',
					showCancel: false,
					confirmText: '我知道了',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async getChildren() {
				let obj = {
					appType: 1,
					...this.page
				}
				let res = await nurseShareHotServices(obj)
				if (res.object.list.length > 0) {

					if (!this.isReachBottom) {
						this.serviceList = res.object.list
						if(res.object.isLastPage){
							this.isReachBottom = true
							this.more = 'noMore'
						}
					} else {
						this.serviceList.push(...res.object.list)
						this.more = 'loading'
					}
				} else {
					if (this.isReachBottom) {
						this.more = 'noMore'
					} else {
						this.serviceList = res.object.list
						if(this.serviceList.length==0){
							this.isReachBottom = true
							this.more = 'noMore'
						}
						
					}

				}

			},
			// 分享
			async serviceDetail(item) {
				uni.showLoading({
					
				})
				getWXCode({nurseId: this.$store.state.userInfo.id,serviceId: item.id+''}).then(r => {
					if(r.success){
						this.bg = r.object
						this.item = {...item}
						this.handleOpen()
						console.log('rrr----',r);
					}
					
				})
			},
			handleOpen() {
				uni.hideLoading()
				this.$refs.popupShare.open()
			},
			closePopup() {
				this.$refs.popupShare.close()
			},
			handleDown() {
				uni.saveImageToPhotosAlbum({
					filePath: this.bg,
					success: function() {
						uni.showToast({
							title: '保存成功！'
						})
					},
					fail:function(){
						uni.showToast({
							title: '请检查访问相册权限！',
							icon:'none'
						})
					}
				})
}
		}
	}
</script>

<style scoped lang="less">
	
	.level-wrap{
		height: 100vh;
		background-color: #F7F7F7;
	}
	.navShow {
		margin: 0 auto;
		// border: #4CD964 1rpx solid;

		.showList {
			background: #FFFFFF;
			// box-shadow: 0px 0px 8rpx 0px #E4E4E4;
			// border-radius: 20rpx;
			// border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			margin: 0 auto;
			padding: 32rpx 40rpx 18rpx;
			&.mm{
				border-top: 16rpx solid #F7F7F7;
			}

			.showImage {
				width: 188rpx;
				height: 188rpx;
				background: #d8d8d8;
				border-radius: 20rpx;
			}

			.details {
				box-sizing: border-box;
				height: 188rpx;
				width: 450rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				white-space: nowrap;
				/*超出的空白区域不换行*/
				overflow: hidden;
				/*超出隐藏*/
				text-overflow: ellipsis;
				/*文本超出显示省略号*/
				position: relative;

				.pro {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.87);
					margin-bottom: 16rpx;

				}

				.content {
					width: 85%;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
					// white-space: nowrap;
					// /*超出的空白区域不换行*/
					// overflow: hidden;
					// /*超出隐藏*/
					// text-overflow: ellipsis;
					// /*文本超出显示省略号*/
				}

				.bottom {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 450rpx;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					.price {
						font-size: 32rpx;
						font-weight: 500;
						color: #EA2027;
						display: block;
					}

					.btn {
						width: 146rpx;
						height: 56rpx;
						background: #4995FD;
						border-radius: 28rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center;

					}
				}
			}
		}
	}

	.no {
		margin-top: 200rpx;
		display: flex;
		justify-content: center;
	}
	.marks {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		background: url('./../../../static/img/share.png');
			background-size: 100% 100%;
		width: 500rpx;
		height: 693rpx;
		padding: 280rpx 24rpx 0;
		.title {
			font-size: 40rpx;
			margin-bottom: 10rpx;
		}
		.navShow{
			width: 100%;
		}
		.showList{
			padding: 16rpx 20rpx 9rpx;
			border: 12rpx solid #E6F1F6;
			border-radius: 12rpx;
			.details{
				max-height: 140rpx;
				width: 70%;
				.pro {
					font-size: 26rpx;
					margin-bottom: 4rpx;
					font-weight: 500;
				}
				.content{
					height: 80rpx;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #999;
				}
				.bottoms{
					
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					
					// .price {
					// 	font-size: 32rpx;
					// 	font-weight: 500;
					// 	color: #EA2027;
					// 	display: block;
					// }
					.num {
						font-size: 24rpx;
						color:#FF6A00;
					}
					.price{
						font-size: 28rpx;
						color:#EA2027;
					}
				}
				
				
			}
			.showImage{
				height: 132rpx;
				width: 132rpx;
				margin-right: 20rpx;
			}
			
		}
		.bg {
			margin: 25rpx 0 5rpx;
			image{
				width: 250rpx;
				height: 250rpx;
			}
			.tips {
				
			}
			
		}
		// .im{
		// 	position: absolute;
		// 	width: 100%;
		// 	height: 100%;
		// 	background: url('/../../../static/img/reward/erweima.jpg');
		// 	background-size: 100% 100%;
		// }
	}
	.cancel{
		width: 100px;
		height: 60px;
		position: absolute;
		bottom: 0;
		left: 80px;
	}
</style>
